<template>
    <!-- 注意，这里必须设置宽高，并且宽高不能都设置为100%，否则显示的是空白 -->
    <div id="china_map" style="width: 100%; height: 450px;"></div>
</template>;

<script>

import * as echarts from "echarts";
import bg from "@/assets/gobg.png"
// import china from "../../../node_modules/echarts/map/json/province/anhui.json";  //安徽地图
import china from "./components/china.json";  //中国地图
echarts.registerMap("china", china);
export default {
    name: 'EchartsMap',
    data() {
        return {
            MapDataList: [
                {
                    name: "黑龙江",
                    value: 44,
                    perf: "1%",
                    symbol: 'image://../../../assets/dot.png'
                },
                {
                    name: "湖南",
                    value: 23,
                    perf: "70%",
                },
                {
                    name: "云南",
                    value: 68,
                    perf: "70%",
                },
                {
                    name: "安徽",
                    value: 66,
                    perf: "60%",
                }
            ]
        };
    },
    mounted() {
        this.setMapData();
        this.$nextTick(() => {
            // if (this.chinachart == null) {
            this.setMapData();
            // }
        });
    },
    methods: {
        // 地图
        setMapData() {
            // 初始化echarts实例 #D8E9FD
            this.chinachart = echarts.init(document.getElementById("china_map"));
            // 进行相关配置
            // let maskImage = new Image();
            // maskImage.src = require('../../assets/gobg.png');
            // this.chartOption.geo.itemStyle.areaColor.image = maskImage
            this.chartOption = {
                tooltip: { // 鼠标移到图里面的浮动提示框
                    trigger: 'item',
                    // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
                    formatter(params, ticket, callback) {
                        // params.data 就是series配置项中的data数据遍历
                        let localValue, perf, downloadSpeep, usability, point;
                        if (params.data) {
                            localValue = params.data.value;
                            perf = params.data.perf;
                            downloadSpeep = params.data.downloadSpeep;
                            usability = params.data.usability;
                            point = params.data.point;
                        } else {// 为了防止没有定义数据的时候报错写的
                            localValue = 0;
                            perf = 0;
                        }
                        let htmlStr = `<div style='font-size:18px;'> ${params.name}</div>
                                <p style='text-align:left;margin-top:-4px;'>项目数量：${localValue}<br/>占比：${perf}<br/></p>`;
                        return htmlStr;
                    },
                    backgroundColor: "rgb(0,0,255,0.4)", //提示标签背景颜色
                    textStyle: { color: "#fff" }, //提示标签字体颜色
                    padding: [5, 10, 0, 10],  // 设置上下的内边距为 5,0，左右的内边距为 10
                },
                // 左边图形控制器
                visualMap: {
                    show: true,
                    bottom: 20,
                    left: 0,
                    // left: 50, top: '30%', right: 0, bottom: 0,  //定位的左上角以及右下角分别所对应的经纬度
                    text: ["200", "0"],
                    min: 0,
                    itemHeight: 100,  //图形的高度，即长条的高度。
                    color: [
                        '#ee6666',//红色
                        '#fc8452',//橙色
                        '#fac858',//黄色
                        '#9a60b4',//紫色
                        '#ea7ccc',//淡紫
                        '#3ba272',//绿色
                        '#91cc75',//浅绿
                        '#5470c6',//蓝色
                        '#73c0de',//淡蓝
                    ]
                },
                geo: {  // 地理坐标系组件用于地图的绘制// geo配置详解：
                    map: "china", // 表示中国地图
                    // roam: true, // 是否开启鼠标缩放和平移漫游
                    zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
                    left: 'center',
                    label: {
                        show: false
                    },
                    itemStyle: {
                        opacity: 0.5,
                        // areaColor:'#000000',
                        areaColor: {
                            image: bg,
                            repeat: 'repeat'
                        },
                        borderColor: 'rgb(0,0,255,0.6)',
                    },
                },
                // 高亮状态下的配置
                emphasis: {  // 地图区域的多边形 图形样式。
                    borderColor: "#000000",//未选中的状态
                    areaColor: "#ababab", //背景颜色
                    label: {
                        show: true, //显示名称
                    },
                    itemStyle: {  //选中的状态// 高亮状态下的多边形和标签样式
                        shadowBlur: 20,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                        borderColor: "#fff",
                        areaColor: "#fff",
                    },
                },
                series: [
                    {
                        name: "地图", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
                        type: "map",
                        geoIndex: 0,
                        label: {
                            show: false,
                        },

                        // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
                        data: this.MapDataList,
                    },
                    // {
                    //     type: 'effectScatter',
                    //     coordinateSystem: 'geo',
                    //     symbol: '',

                    //     symbolSize: [16, 16],
                    //     // symbolOffset: [],
                    //     label: {
                    //         normal: {
                    //             show: false,
                    //             offset: [0, -18],
                    //             textStyle: {
                    //                 color: '#fff',
                    //                 fontSize: 12,
                    //                 fontWeight: 500
                    //             },
                    //         }
                    //     },
                    //     data: [
                    //         [113.2708136740, 23.1351666766],
                    //         [112.2708136740, 22.1351666766],
                    //     ],
                    //     showEffectOn: 'render',
                    //     rippleEffect: {
                    //         brushType: 'stroke'
                    //     },
                    //     hoverAnimation: true,
                    //     zlevel: 9
                    // },
                    {
                        type: "effectScatter", // 类型
                        coordinateSystem: "geo", // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
                        // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
                        // 'pin', 'arrow', 'none'
                        symbol: '',

                        // 标记的大小, 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数
                        // (value: Array|number, params: Object) => number|Array
                        // 其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数
                        // symbolSize: function (val) {
                        //     return val[2] / 600;
                        // },
                        // 图形的样式
                        itemStyle: {
                            normal: {
                                // areaColor: '#00FFFF', // 地图颜色
                                borderWidth: 1, // 边框的宽度
                                shadowColor: "#0098d9", //  阴影颜色
                                borderColor: "#00FFFF", // 边框颜色
                                // shadowOffsetX: -5,
                                // shadowOffsetY: 10,
                                shadowBlur: 12, // 阴影的模糊大小
                                shadowOffsetX: 0, //阴影水平方向上的偏移距离
                                shadowOffsetY: 12 // 阴影垂直方向上的偏移距离
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        // 系列中的数据内容数组。数组项通常为具体的数据项
                        data: [
                            { name: `长宁区`, value: [121.4222, 31.218123, 11] },
                            { name: `徐汇区`, value: [121.43752, 31.179973, 12] },
                            { name: `松江区`, value: [121.223543, 31.03047, 13] },
                            { name: `闵行区`, value: [121.375972, 31.111658, 14] },
                            { name: `金山区`, value: [121.458472, 30.912345, 15] },
                            { name: `奉贤区`, value: [121.458472, 30.912345, 16] }
                        ]
                    }

                ],
            };

            // 使用刚指定的配置项和数据显示地图数据
            this.chinachart.setOption(this.chartOption);
        },
    }
}
</script>